<template>
  <n-form
		ref="formRef"
		:model="wyform"
		:rules="rules"
		label-placement="left"
    label-width="auto"
		require-mark-placement="right-hanging">
		<n-form-item label="学号" path="no">
			<n-input maxlength="20" v-model:value="wyform.no" placeholder="请输入学号"></n-input>
		</n-form-item>
		<n-form-item label="学生姓名" path="name">
			<n-input maxlength="20" v-model:value="wyform.name" placeholder="请输入学生姓名"></n-input>
		</n-form-item>
		<n-form-item label="学校" path="school">
			<n-input maxlength="64" v-model:value="wyform.school" placeholder="请输入学校"></n-input>
		</n-form-item>
		<n-form-item label="专业" path="major">
			<n-input maxlength="20" v-model:value="wyform.major" placeholder="请输入专业"></n-input>
		</n-form-item>
		<n-form-item label="学历" path="qualification">
			<n-input maxlength="20" v-model:value="wyform.qualification" placeholder="请输入学历"></n-input>
		</n-form-item>
		<n-form-item label="英语水平" path="englishLevel">
			<n-radio-group v-model:value="wyform.englishLevel" name="radiogroup">
				<n-space>
					<n-radio value="四级" label="四级"></n-radio>
					<n-radio value="六级" label="六级"></n-radio>
					<n-radio value="无" label="无"></n-radio>
				</n-space>
			</n-radio-group>
		</n-form-item>
		<n-form-item label="其他语言" path="otherLanguage">
			<n-input maxlength="20" v-model:value="wyform.otherLanguage" placeholder="请输入其他语言"></n-input>
		</n-form-item>
		<n-form-item label="毕业时间" path="graduationDate">
			<n-date-picker
				v-model:formatted-value="wyform.graduationDate"
				value-format="yyyy-MM-dd"
				type="date"
				clearable/>
		</n-form-item>
		<n-form-item label="手机号" path="phone">
			<n-input v-model:value="wyform.phone" placeholder="请输入手机号"></n-input>
		</n-form-item>
		<n-form-item label="邮箱" path="email">
			<n-input v-model:value="wyform.email" placeholder="请输入邮箱"></n-input>
		</n-form-item>
		<n-form-item>
			<n-button type="primary" @click="save">保存</n-button>
		</n-form-item>
	</n-form>
</template>

<script setup>
import { check, getInfo, saveAndUpdate } from '@/api/studentApi'
const formRef = ref()
const props = defineProps(['gradeId', 'id'])
const emits = defineEmits(['update:show', 'getTableData'])
function checkData(field, value, callback) {
	return new Promise((resolve, reject) => {
		check({ field, value, id: props.id }, content => {
			console.dir(content)
			if (content) {
				resolve()
			} else {
				reject(new Error()) 
			}
		})
	})
}
const wyform = reactive({
	no: '',
	gradeId: props.gradeId,
	name: '',
	school: '',
	major: '',
	qualification: '',
	englishLevel: '',
	otherLanguage: '',
	graduationDate: null,
	phone: '',
	email: ''
})
const rules = {
	no: [
		{ required: true, message: '请输入学号', trigger: 'blur' },
	],
	name: [
		{ required: true, message: '请输入学生姓名', trigger: 'blur' },
	],
	school: [
		{ required: true, message: '请输入学校', trigger: 'blur' },
	],
	major: [
		{ required: true, message: '请输入专业', trigger: 'blur' },
	],
	qualification: [
		{ required: true, message: '请输入学历', trigger: 'blur' },
	],
	englishLevel: [
		{ required: true, message: '请输入英语水平', trigger: 'blur' },
	],
	otherLanguage: [
		{ required: true, message: '请输入其他语言', trigger: 'blur' },
	],
	graduationDate: [
		{ required: true, message: '请输入毕业时间', trigger: 'blur' },
	],
	phone: [
		{ required: true, message: '请输入手机号', trigger: 'blur' },
		{  pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
		{ validator: (rule, value) => checkData('phone', value), message: '手机号已经被使用', trigger: 'blur'  }
	],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
		{ validator: (rule, value) => checkData('email', value), message: '邮箱已经被使用', trigger: 'blur'  }
	]
}
if (process.client && props.id) {
	getInfo(props.id, content => {
		if (content) {
			wyform.id = props.id
			wyform.gradeId = content.gradeId
			wyform.no = content.no
			wyform.name = content.name
			wyform.school = content.school
			wyform.major = content.major
			wyform.qualification = content.qualification
			wyform.englishLevel = content.englishLevel
			wyform.otherLanguage = content.otherLanguage
			wyform.graduationDate = content.graduationDate
			wyform.phone = content.phone
			wyform.email = content.email
		}
	})
}
function save () {
	saveAndUpdate(wyform, content => {
		emits('update:show', false)
		emits('getTableData')
	},formRef.value)
}
</script>

<style scoped lang="scss">
</style>